<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="waterShorelineForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6 b-r">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">岸线编码：</label>
                <div class="col-md-12">
                  <input id="bean-shorelineCode" name="shorelineCode" v-model="item.shorelineCode" class="form-control"
                      type="text" placeholder="请输入岸线编码" required="" aria-required="true"
                      aria-describedby="bean-shorelineCode-error" maxlength="50" aria-invalid="true">
                  <span id="bean-shorelineCode-error" class="help-block m-b-none" for="bean-shorelineCode"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">所在河道：</label>
                <div class="col-md-12">
                  <!--<input id="bean-riverCourseCode" name="riverCourseCode" v-model="item.riverCourseCode" class="form-control" type="text"  placeholder="请输入所在河道"  required="" aria-required="true"  aria-describedby="bean-riverCourseCode-error"  maxlength="50"   aria-invalid="true">-->

                  <riverSelect :selected-code="item.riverCourseCode"/>
                  <span id="bean-riverCourseCode-error" class="help-block m-b-none" for="bean-riverCourseCode"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">河流岸别：</label>
                <div class="col-md-12">
                  <input id="bean-riverBank" name="riverBank" v-model="item.riverBank" class="form-control" type="text"
                      placeholder="请输入河流岸别" required="" aria-required="true" aria-describedby="bean-riverBank-error"
                      maxlength="20" aria-invalid="true">
                  <span id="bean-riverBank-error" class="help-block m-b-none" for="bean-riverBank"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">岸线长度：</label>
                <div class="col-md-12">
                  <input id="bean-shorelineLength" name="shorelineLength" v-model="item.shorelineLength"
                      class="form-control" type="number" placeholder="请输入岸线长度" required="" aria-required="true"
                      aria-describedby="bean-shorelineLength-error" aria-invalid="true">
                  <span id="bean-shorelineLength-error" class="help-block m-b-none" for="bean-shorelineLength"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">利用规划类别：</label>
                <div class="col-md-12">
                  <input id="bean-planningType" name="planningType" v-model="item.planningType" class="form-control"
                      type="text" placeholder="请输入利用规划类别" aria-describedby="bean-planningType-error" maxlength="20"
                      aria-invalid="true">
                  <span id="bean-planningType-error" class="help-block m-b-none" for="bean-planningType"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">起点位置名称：</label>
                <div class="col-md-12">
                  <input id="bean-startAddr" name="startAddr" v-model="item.startAddr" class="form-control" type="text"
                      placeholder="请输入起点位置名称" aria-describedby="bean-startAddr-error" maxlength="50"
                      aria-invalid="true">
                  <span id="bean-startAddr-error" class="help-block m-b-none" for="bean-startAddr"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">终点位置名称：</label>
                <div class="col-md-12">
                  <input id="bean-endAddr" name="endAddr" v-model="item.endAddr" class="form-control" type="text"
                      placeholder="请输入终点位置名称" aria-describedby="bean-endAddr-error" maxlength="50"
                      aria-invalid="true">
                  <span id="bean-endAddr-error" class="help-block m-b-none" for="bean-endAddr"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">起点经度：<a href="javascript:;" @click="getCoordinate('start')" class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a></label>
                <div class="col-md-12">
                  <input id="bean-startLon" name="startLon" v-model="item.startLon" class="form-control" type="number"
                      placeholder="请输入起点经度" required="" aria-required="true" aria-describedby="bean-startLon-error"
                      aria-invalid="true">
                  <span id="bean-startLon-error" class="help-block m-b-none" for="bean-startLon"></span>
                </div>
              </div>

            </div>
            <div class="col-md-6">

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">起点纬度：</label>
                <div class="col-md-12">
                  <input id="bean-startLat" name="startLat" v-model="item.startLat" class="form-control" type="number"
                      placeholder="请输入起点纬度" required="" aria-required="true" aria-describedby="bean-startLat-error"
                      aria-invalid="true">
                  <span id="bean-startLat-error" class="help-block m-b-none" for="bean-startLat"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">终点经度：<a href="javascript:;" @click="getCoordinate('end')" class="label label-success"><i class="fa fa-coordinate"></i>坐标拾取</a></label>
                <div class="col-md-12">
                  <input id="bean-endLon" name="endLon" v-model="item.endLon" class="form-control" type="number"
                      placeholder="请输入终点经度" required="" aria-required="true" aria-describedby="bean-endLon-error"
                      aria-invalid="true">
                  <span id="bean-endLon-error" class="help-block m-b-none" for="bean-endLon"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">终点纬度：</label>
                <div class="col-md-12">
                  <input id="bean-endLat" name="endLat" v-model="item.endLat" class="form-control" type="number"
                      placeholder="请输入终点纬度" required="" aria-required="true" aria-describedby="bean-endLat-error"
                      aria-invalid="true">
                  <span id="bean-endLat-error" class="help-block m-b-none" for="bean-endLat"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">行政区划：</label>
                <div class="col-md-12">
                  <!--<input id="bean-regionId" name="regionId" v-model="item.regionId" class="form-control" type="text"-->
                  <!--placeholder="请输入行政区划" aria-describedby="bean-regionId-error" maxlength="50"-->
                  <!--aria-invalid="true">-->
                  <region-select :region-ids="item.regionId"/>
                  <span id="bean-regionId-error" class="help-block m-b-none" for="bean-regionId"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">归口管理单位：</label>
                <div class="col-md-12">
                  <input id="bean-gkManagementDept" name="gkManagementDept" v-model="item.gkManagementDept"
                      class="form-control" type="text" placeholder="请输入归口管理单位"
                      aria-describedby="bean-gkManagementDept-error" maxlength="50" aria-invalid="true">
                  <span id="bean-gkManagementDept-error" class="help-block m-b-none" for="bean-gkManagementDept"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">目前状态 包括已完成、未完成：</label>
                <div class="col-md-12">
                  <select data-placeholder="选择目前状态" id="bean-currentState" name="currentState"
                      class="form-control" aria-describedby="bean-currentState-error" maxlength="50"
                      aria-invalid="true">
                    <option value="">--请选择目前状态--</option>
                    <option value="未完成" :selected="'未完成' === item.currentState">未完成</option>
                    <option value="已完成" :selected="'已完成' === item.currentState">已完成</option>
                  </select>
                  <!--<input id="bean-currentState" name="currentState" v-model="item.currentState" class="form-control"-->
                  <!--type="text" placeholder="请输入目前状态 包括已完成、未完成" aria-describedby="bean-currentState-error"-->
                  <!--maxlength="20" aria-invalid="true">-->
                  <span id="bean-currentState-error" class="help-block m-b-none" for="bean-currentState"></span>
                </div>
              </div>

              <div class="form-group clearfix">
                <label class="col-md-8 control-label">备注：</label>
                <div class="col-md-12">
                  <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"
                      placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">
                  <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
                </div>
              </div>

            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import {$storage, apiUtil, axiosContentType, site} from '@/assets/js/boss'
import riverSelect from './riverSelect'
import regionSelect from './regionSelect'

export default {
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: ''
    }
  },
  components: {
    riverSelect,
    regionSelect
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#waterShorelineForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.waterShoreline.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.waterShoreline.info)) {
        that.info();
      }
    });
  },
  methods: {
    info() {
      let that = window.$vueApp = this;
      axios.get(site.waterShoreline.info + sessionStorage.getItem(site.waterShoreline.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = window.$vueApp = this;
      if ($('#waterShorelineForm').valid()) {
        axios.post(site.waterShoreline.save, $('#waterShorelineForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
      ;
    },
    getCoordinate(val) { // 坐标拾取页面
      let that = window.$vueApp = this;
      $storage.setItem('inputKey', val);
      that.lbox.openMyBoxLayer('经纬度坐标拾取', site.map.mapll);
    },
    setMapSite(longitude, latitude, address) { // 坐标拾取回调
      let that = window.$vueApp = this;
      let inputKey = $storage.getItem('inputKey');
      if (inputKey === 'start') {
        $('#bean-startLon').val(longitude);
        $('#bean-startLat').val(latitude);
        that.item.startLon = longitude;
        that.item.startLat = latitude;
      } else if (inputKey === 'end') {
        $('#bean-endLon').val(longitude);
        $('#bean-endLat').val(latitude);
        that.item.endLon = longitude;
        that.item.endLat = latitude;
      }
      $storage.removeItem('inputKey');
    }
  }
}
</script>

